<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
</head>
<style>
  .container{
    padding: 0px 50px;   /* 内边距上下为0.左右为30像素*/
    /* background-image:  url(./img/qihuanxuanhuan.jpg);
    background-repeat: no-repeat ; */
  }
  /* 导航栏 */
  .header {
    width: 100%;
    height: 84px;
    background-color: white;
  }

  .header .header_nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .header_logo img {
    width: 170px;
    margin-top: 25px;
    /* padding-left: 75px; */
 
  }

  .header .header_nav .header_search {
    display: flex;
    width: 30%;
    height: 40px;
    /* min-width: ; */
    text-align: center;
    margin-top: 19px;
  }

  .header .header_nav .header_search>input {
    width: 75%;
    height: 100%;
    margin: 0; 
    margin-left: 66px;
    /*padding-left: 65px; */
    background-color: whitesmoke;
    border-radius: 5px 0 0 5px;
    border: none;
    
  }

  .header .header_nav .header_search>button {
    width: 20%;
    height: 40px;
    border: none;
    background-color: #bf2c24;
    border-radius: 0px 5px 5px 0px

  }

  .header .header_nav .login {
    width: 30%;
    text-align: right;
    font-size: 14px;
    margin-top: 30px;
  }

  .header .header_nav .login>span {
    display: inline-block;
    /* margin-right: 75px; */
    /* margin-left: -62px; */
  }

  .nav {
    width: 100%;
    /*11111*/
    height: 30px;
    /* background-color: #524b4b; */
    /* text-align: center; */

  }

  .nav-box {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    margin-bottom: 14px;
    letter-spacing: 1px;
    /*字间距*/
    font-weight: 700;
    margin-top: 115px;
    margin-right: 280px;

  }

  .nav .nav-box>div:nth-child(1) {
    color: white;
    margin-left: 10px;
    margin-top: 3px;

  }

  .nav .nav-box>div:nth-child(2) {
    width: 50%;
    margin-top: 3px;

  }

  .nav .nav-box>div:nth-child(2) a {
    padding-right: 20px;
    color: white;
    text-decoration: none;
    /*去下划线*/
    /* font-weight: 700; */

  }

  .nav .nav-box>div:nth-child(3) a {
    padding-right: 10px;
    color: white;
    text-decoration: none;
    /*去下划线*/
    /* font-weight: 700;*/

  }

  /* 小标题 */
  .top-title {
    width: 1200px;
    height: 110px;
    color: #333;
    font-size: 20px;
    /* padding-left: 75px; */
    line-height: 170px;
    margin-left: 17px;
    border-bottom: 1px solid #e6e6e6;/*给小标题加下边线*/
    font-weight: 700/*加粗*/
  }

  /* 小说的整体容器 */
  .book {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  /* 一本书的容器 */
  .book-container {
    display: flex;
    width: 24%;
    min-width: 270px;
    margin-left: 1%;
  }

  /* 右边文字的容器 */
  .right {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    height: 100%;
    min-width: 170px;
  }

  /* 图片 */
  .img-book img {
    display: inline-block;
    width: 78px;
    height: 100px;
    border-radius: 4px;
    min-width: 78px;
    margin: 0 auto;
    margin-top: 34px;
    margin-right: 23px;
  }

  /* 小标题 */
  .right .bookname {
    width: 100%;
    height: 25px;
    line-height: 24px;
    margin-top: 30px;
  }

  .book .bookname a {
    color: #333;
    /* font-size: 16px; */
    text-decoration: none;
    /*去下划线*/
  }

  /* 鼠标悬停变色 */
  .book .bookname a:hover {
    color: #e84848;
  }

  /* 文字信息 */
  .info a {
    display: flex;
    width: 100%;
    color: #333;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    font-size: 13px;
  }

  /* 作者 */
  .author {
    display: flex;
    width: 100%;
    height: 30px;
  }

  .author a {
    display: flex;
    width: 50%;
    min-width: 70px;
    text-decoration: none;
    /*去下划线*/
    color: #999;
    line-height: 49px;
    letter-spacing: 1px;
    font-size: 13px;
  }

  /* 鼠标悬停变色 */
  .author a:hover {
    color: #e84848;
  }

  .author span {
    /* display: flex; */
     width: 30%;
    height: 80%;
    font-size: 13px;
    line-height: 27px;
    color: #fc7403;
    min-width: 70px;
    border: 1px solid #fc7403;
    text-align: center;
    margin-left: 50px;
  }
   /* 页尾的css */
   .foot{
   width: 100%;
   height: 95px;
   background-color: #f0f0f0;
   font-size: 14px;
   /* margin-top: 100px;
   margin-bottom: 50px; */
   line-height: 95px;
   text-align: center;
}
.footgray a{
  color: #666;
  margin-left: 6px;
}
.footgray a:hover{color: #d60a0a;}
.footgray span{
  color: #dbd9d9;
  margin-left: 6px;
}
/* 头部背景图片 */
.container .picture img{
  width: 1200px;
  height: 160px;
  margin-left: 15px;
}
</style>
<body>
  <!-- 画布所有网站第一步先写个div控制所有样式，下次再不写，不教你了，自己玩去吧 -->
  <div class="container">
    <!-- 导航栏 -->
    <!-- 头部 -->
    
    <div class="header">
      <div class="header_nav">
        <div class="header_logo">
          <img src="./img/big logo.png" alt="">
        </div>
        <div class="header_search">
          <input type="text"><button>搜索</button>
        </div>
        <div class="login">
          <span>登录</span>
          <span>注册</span>
        </div>
        </div>
        <!-- 头部背景 -->
        <div class="picture"><img src="./img/qihuanxuanhuan.jpg" alt=""></div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
      <div class="nav-box">
        <!-- 导航栏内8个div -->
        <!-- 作品分类不跳转 -->
        <div>
          <!-- <span></span> -->
        </div>
        <!-- 导航中部 -->
        <div>
          <a href="#">全部作品</a>
          <a href="#">排行榜</a>
          <a href="#">完本</a>
          <a href="#">免费</a>
          <a href="#">作家专区</a>
          <a href="#">客户端</a>
        </div>
        <!-- 导航尾部 -->
        <div>
          <!-- <a href="#"></a> -->
        </div>
      </div>
    </div>
    <!-- 主体分页书籍 -->
    <div class="top-title">
      <div class="title fl">精品推荐</div>
    </div>
    <!-- 书籍 -->
    <div class="book">
      <div class="book-container">
        <div class="img-book">
          <img src="./img/最强暴君.jpeg" alt="全民修武：最强暴君">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">全民修武：最强暴君</a> </div>
          <div class="info"><a href="#">实力至上，器道称雄！一柄黑刀在手，杀妖族，退圣族，破苍穹，戮天下！</a>
          </div>
          <div class="author">
            <a href="#">树懒不算懒</a>
            <span>日更5千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/时诚领主.jpeg" alt="时域领主">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">时域领主</a> </div>
          <div class="info"><a href="#">我有一道，可逆转、可创造、可毁灭、可重生</a>
          </div>
          <div class="author">
            <a href="#">元气小虫</a>
            <span>日更3千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/逐鹿百战.jpeg" alt="涿鹿百战">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">涿鹿百战</a> </div>
          <div class="info"><a href="#">世界问术，百断为战，我冠绝战场，争的名绝世间！</a>
          </div>
          <div class="author">
            <a href="#">锁星光</a>
            <span>日更1千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/捉妖怪.jpeg" alt="我在大周捉妖怪">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">我在大周捉妖怪</a> </div>
          <div class="info"><a href="#">人族示弱，妖族横行，身为大周御妖师，一人一枪便可镇压一族！</a>
          </div>
          <div class="author">
            <a href="#">夜入白</a>
            <span>日更3千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/做半仙.jpeg" alt="我在诸天做半仙">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">我在诸天做半仙</a> </div>
          <div class="info"><a href="#">山道年独坐星空下，一张手绘阵图如同棋盘。</a>
          </div>
          <div class="author">
            <a href="#">春水回潮</a>
            <span>日更3千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/想当法师.jpeg" alt="剑神这次想当法师">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">剑神这次想当法师</a> </div>
          <div class="info"><a href="#">天道有缺而分化六极，故世间再无真正意义上的神明。</a>
          </div>
          <div class="author">
            <a href="#">俞子期</a>
            <span>日更16千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/我的外挂.jpeg" alt="我的外挂是作者">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">我的外挂是作者</a> </div>
          <div class="info"><a href="#">这本书的作者，成为了他的“外挂”。</a>
          </div>
          <div class="author">
            <a href="#">ID已被注销</a>
            <span>日更6千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/万道龙神.jpeg" alt="万道龙神">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">万道龙神</a> </div>
          <div class="info"><a href="#">带着前世记忆和万古最强功法重归少年时代</a>
          </div>
          <div class="author">
            <a href="#">苏九叶</a>
            <span>日更10千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/鸿蒙无疆.jpeg" alt="鸿蒙无疆">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">鸿蒙无疆</a> </div>
          <div class="info"><a href="#">天生魂师，九废残体，但我才是真正的天命之人！</a>
          </div>
          <div class="author">
            <a href="#">曾经2208</a>
            <span>日更3千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/反派狗腿子.jpeg" alt="无敌从反派狗腿子开始">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">无敌从反派狗腿子开始</a> </div>
          <div class="info"><a href="#">重活一世，我要一步一步走向坏人之巅！</a>
          </div>
          <div class="author">
            <a href="#">诸葛铁牛</a>
            <span>日更10千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/最狂邪神.jpeg" alt="最狂邪神">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">最狂邪神</a> </div>
          <div class="info"><a href="#">九幽大陆我为王</a>
          </div>
          <div class="author">
            <a href="#">白字</a>
            <span>日更5千</span>
          </div>
        </div>
      </div>
      <div class="book-container">
        <div class="img-book">
          <img src="./img/星辰侠影.jpeg" alt="星河侠影">
        </div>
        <div class="right">
          <div class="bookname"><a href="#">星河侠影</a> </div>
          <div class="info"><a href="#">成为实力撼动星辰，侠名流传星域的传奇。星河灿烂，侠影辉煌！</a>
          </div>
          <div class="author">
            <a href="#">树懒不算懒</a>
            <span>日更0千</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 统一页尾 -->
<div class="foot">
  <div class="footgray">
 <a href="#">关于趣读</a>
 <span>|</span>
 <a href="#">诚聘英才</a>
 <span>|</span>
 <a href="#">商务合作</a>
 <span>|</span>
 <a href="#">法律声明</a>
 <span>|</span>
 <a href="#">帮助中心</a>
 <span>|</span>
 <a href="#">作者投稿</a>
 <span>|</span>
 <a href="#">联系我们</a>
 <span>|</span>
 <a href="#">友情链接</a>
 <span>|</span>
 <a href="#">谨防诈骗</a>
</div>
</div> 
</body>

</html>